<template>
  <div class="lp-dialog" v-if="value.show">
    <div class="lp-dialog-container">
      <div class="head">
        <div>{{value.title}}</div>
        <span class="close" @click="close" v-if="value.close"><img src="static/img/icon/close.png" alt=""></span>
      </div>
      <slot class="body" v-if="!value.content"></slot>
      <div class="body" v-else v-html="value.content"></div>

      <div class="foot">
        <slot name="foot">
          <a class="lp-btn large primary" @click="close">{{value.cancelBtn || '取消'}}</a>
        </slot>
      </div>
      <slot name="footer"></slot>
    </div>
    <div class="mask" @click="close(value.maskClose)"></div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: {
        content: false,
        show: false,
        cancelBtn: '取消',
        maskClose: true,
        close: true
      }
    }
  },
  methods: {
    close(maskClose) {
      if (!maskClose) return
      this.value.show = false
      this.$emit('input', this.value)
    }
  }
}
</script>


<style lang="scss">
.lp-dialog {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10010;
  }
  .lp-dialog-container {
    width: 11rem;
    background: #fff;
    border-radius: 0.1rem;
    padding: 0.35rem 0.15rem;
    margin: 1rem auto 0;
    position: relative;
    z-index: 10020;
    .head {
      position: relative;
      font-size: 0.36rem;
      text-align: center;
      padding: 0.15rem;
      span.close {
        position: absolute;
        right: 0.15rem;
        top: 0;
        opacity: 1;
      }
    }
    .body {
      padding: 0.2rem 0.6rem 0.2rem;
      font-size: 0.2rem;
    }
    .foot {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.15rem;
      .lp-btn {
        margin: 0 0.15rem;
      }
    }
  }
}

@media screen and (orientation: portrait) {
  .lp-dialog {
    .lp-dialog-container {
      width: 80%;
      margin-top: 3rem;
    }
  }
}
@media screen and (orientation: landscape) {
}
</style>
